<template>
<div class="like-page">
 <div class="bj">
 </div>
 <div class="div1">
 <div class="div2">
  <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="">
  </div>
  <div class="text">游客</div>
 <router-link class="div3" to=""><button @click="fn">退出</button></router-link>
 <p class="wz">编辑个人资料></p>
 </div>
<van-grid :column-num="3" class="div4" :border='false'>
<van-grid-item icon="star-o" to="/collect" text="我的收藏" />
<van-grid-item icon="wap-home-o" to="/hire" text="我的出租" />
<van-grid-item icon="underway-o" text="看房记录" />
<van-grid-item icon="ecard-pay" text="成为房主" />
<van-grid-item icon="user-circle-o" text="个人资料" />
<van-grid-item icon="service-o" text="联系我们" />
</van-grid>
<div>
 <img class="div5" src="http://liufusong.top:8080/img/profile/join.png" alt="">
</div>
 </div>
</template>
<script>
import { Dialog } from 'vant'
export default {
  data () {
    return {

    }
  },
  methods: {
    fn () {
      Dialog.confirm({
        title: '提示',
        message: '是否确认退出'
      })
        .then(() => {
          this.$router.push('/looking4')
        })
        .catch(() => {
          // on cancel
        })
    }

  }
}

</script>

<style lang="less" scoped>
.like-page {
margin-bottom: 50px;
margin-top: 44px;
}
.bj{
background-image: url('http://liufusong.top:8080/img/avatar.png');
width: 100%;
height: 200px;
background-size: 100%;
margin-top: -44px;
background-repeat: no-repeat;
}
.div1{
 width: 87%;
 height: 165px;
 background-color:white;
 margin: 0 auto;;
 text-align: center;
 margin-top: -70px;
 position: relative;
 box-shadow: 0 0 20px #ccc;
}
img{
width: 67px;
height: 67px;
}
.div2{
 position: absolute;
 border: 6px solid #f5f5f5;
 border-radius: 50%;
 width: 67px;
 height: 67px;
 margin-top: -40px;
 margin-left: 38%;
}
.text{
position: absolute;
margin: 0 auto;
margin-left: 45%;
margin-top: 55px;
}
button{
 width: 85px;
 height: 35px;
 margin-top: 90px;
 background-color:#21b97a;
 color: white;
 border-radius: 8px;
 border-style: none;
}
.div4{
 margin-top: 14px;
}
.div5{
 width: 90%;
 height: 80px;
 margin:20px
}
.wz {
  font-size: 12px;
}
</style>
